<template>
  <div class="user_pwd">
    <navBar :title="getTitle" @onClickLeft="onClickLeft" />
    <div class="bzt">
      <van-steps :active="active" active-color="#38f">
        <van-step>
          <template #active-icon v-if="active == 0">
            <i class="iconfont icon-icon-test1 activeI"></i>
          </template>
          <template #inactive-icon v-else>
            <i class="iconfont icon-icon-test1"></i>
          </template>
        </van-step>
        <van-step>
          <template #active-icon v-if="active == 1">
            <i class="iconfont icon-icon-test2 activeI"></i>
          </template>
          <template #inactive-icon v-else>
            <i class="iconfont icon-icon-test2"></i>
          </template>
        </van-step>
        <!-- <van-step>
          <template #active-icon v-if="active == 2">
            <i class="iconfont icon-icon-test3 activeI"></i>
          </template>
          <template #inactive-icon v-else>
            <i class="iconfont icon-icon-test3"></i>
          </template>
        </van-step> -->
      </van-steps>
    </div>

    <!-- 步骤一 -->
    <div v-if="active == 0">
      <div class="user_form">
        <van-form>
          <van-field
            v-model="telNum"
            readonly
            name="手机号"
            placeholder="请输入当前手机号"
            :rules="[{ pattern: /^1[3-9]\d{9}$/, message: '请填写手机号' }]"
          >
            <template #label v-if="active == 0">
              <span class="left_text">+86 ></span>
            </template>
            <template #extra v-if="active == 0">
              <span class="sendcode" @click="sendCode" v-if="djsFlag"
                >发送验证码</span
              >
              <span class="daojishi" v-else>{{ djs }}后再次获取</span>
            </template>
          </van-field>

          <van-password-input
            :value="code"
            :mask="false"
            :focused="showKeyboard"
            @focus="showKeyboard = true"
          />
          <van-number-keyboard
            :show="showKeyboard"
            @input="onInput"
            @delete="onDelete"
            @blur="showKeyboard = false"
          />
        </van-form>
      </div>
      <div class="btn_warp">
        <van-button type="info" class="btn" @click="sendBtn" :disabled="btn1"
          >下一步</van-button
        >
      </div>
    </div>

    <!-- 步骤二 -->
    <div v-if="active == 1">
      <div class="user_form">
        <van-form>
          <van-field
            v-model="newTelNum"
            name="新的手机号"
            placeholder="新的手机号"
            :rules="[{ pattern: /^1[3-9]\d{9}$/, message: '请填写新的手机号' }]"
          >
            <template #label v-if="active == 1">
              <span class="left_text">+86 ></span>
            </template>
            <template #extra v-if="active == 1">
              <span class="sendcode" @click="sendCode1" v-if="djsFlag1"
                >发送验证码</span
              >
              <span class="daojishi" v-else>{{ djs1 }}后再次获取</span>
            </template>
          </van-field>
          <van-password-input
            :value="code1"
            :mask="false"
            :focused="showKeyboard1"
            @focus="showKeyboard1 = true"
          />
          <van-number-keyboard
            :show="showKeyboard1"
            @input="onInput1"
            @delete="onDelete1"
            @blur="showKeyboard1 = false"
          />
        </van-form>
      </div>
      <div class="btn_warp">
        <van-button type="info" class="btn" @click="secondBtn" :disabled="btn2"
          >确认修改</van-button
        >
      </div>
    </div>

    <!-- 步骤三 -->
    <!-- <div v-if="active == 2">
      <div class="showSucc">
        <div class="icon_warp">
          <i class="iconfont icon-dui"></i>
        </div>
      </div>
      <div class="btn_warp">
        <van-button type="info" class="btn" @click="toHome">确定</van-button>
      </div>
    </div> -->
  </div>
</template>

<script>
import navBar from "@cb/navBar.vue";
import { getCode } from "@a/login";
import { editPhoneNum, getMyInfo } from "@a/user";
import { Toast } from "vant";
import { getMy } from "@u/index";
export default {
  components: {
    navBar
  },
  data() {
    return {
      // 当前步骤
      active: 0,
      // 手机号
      telNum: "",
      newTelNum: "",
      // 验证码
      code: "",
      code1: "",
      // 以下都是密码输入框
      showKeyboard: true,
      errorInfo: "",
      showKeyboard1: true,
      // 密码
      newPwd: "",
      againPwd: "",
      // 禁用按钮
      btn1: true,
      btn2: true,
      // 获取验证码倒计时
      djs: 60,
      djs1: 60,
      // 倒计时旗子
      djsFlag: true,
      djsFlag1: true,
      // 返回来的code
      getcode: "",
      getcode1: ""
    };
  },
  methods: {
    onClickLeft() {
      this.active = 0;
      this.$router.back();
    },
    // 步骤一发送验证码
    /* 
        1.正则验证手机号，通过，获取验证码(验证码获取后60S才能重新获取)，没有通过，提示号码有误
        2.输入验证码 3.验证码不为空 按钮可以点    
    */
    async sendCode() {
      let params = {
        phone: this.telNum,
        type: "2"
      };
      if (
        /^1[3-9]\d{9}$/.test(this.telNum) &&
        this.telNum == this.$store.state.user.phone
      ) {
        const res = await getCode(params);
        if (res.code == 200) {
          Toast.success("验证码获取成功！");
          this.getcode = res.data;
          this.djsFlag = false;
          let timer = setInterval(() => {
            this.djs--;
            if (this.djs == 0) {
              clearInterval(timer);
              this.djsFlag = true;
            }
          }, 1000);
        } else {
          Toast.fail("验证码获取失败！");
        }
      } else {
        Toast.fail("请输入当前手机号码！");
      }
    },
    // 步骤二发送验证码

    /**
     * 修改手机号时
     * 第一步验证原手机号，type传2获取验证码
     * 第二步验证新手机号，type是用1还是用2
     * 如果用1，重新注册了一个号，号的数据是否和原号数据一样
     * 如果用2，获取验证码时提示手机号未注册
     */
    async sendCode1() {
      let params = {
        phone: this.newTelNum,
        type: "1"
      };
      if (/^1[3-9]\d{9}$/.test(this.newTelNum)) {
        const res = await getCode(params);
        if (res.code == 200) {
          Toast.success("验证码获取成功！");
          this.getcode1 = res.data;
          this.djsFlag1 = false;
          let timer = setInterval(() => {
            this.djs1--;
            if (this.djs1 == 0) {
              clearInterval(timer);
              this.djsFlag1 = true;
            }
          }, 1000);
        } else {
          Toast.fail("验证码获取失败！");
        }
      } else {
        Toast.fail("请输入正确的手机号！");
      }
    },
    toHome() {
      this.$store.commit("delUser");
      this.$store.commit("delToken");
      sessionStorage.removeItem("store");
      sessionStorage.removeItem("token");
      this.$router.replace("/");
    },

    sendBtn() {
      if (this.code != this.getcode) {
        Toast.fail("验证码有误！");
      } else {
        this.active = 1;
      }
    },
    // 修改手机号
    async secondBtn() {
      if (this.code1 != this.getcode1) {
        Toast.fail("验证码有误！");
      } else {
        const res = await editPhoneNum({ phone: this.newTelNum });
        if (res.code == 200) {
          await getMy(this);
          Toast.success("修改成功！");
         this.toHome();
        }
      }
    },
    onInput(key) {
      this.code = (this.code + key).slice(0, 6);
      if (this.code.length === 6) {
        this.errorInfo = "密码错误";
      } else {
        this.errorInfo = "";
      }
    },
    onDelete() {
      this.code = this.code.slice(0, this.code.length - 1);
    },
    onInput1(key) {
      this.code1 = (this.code1 + key).slice(0, 6);
      if (this.code1.length === 6) {
        this.errorInfo = "密码错误";
      } else {
        this.errorInfo = "";
      }
    },
    onDelete1() {
      this.code1 = this.code1.slice(0, this.code1.length - 1);
    }
  },
  created() {
    this.active = 0;
    // getMyInfo().then(res => {
    //   this.telNum = res.data.phone;
    // });
    this.telNum = this.$store.state.user.phone
  },
  watch: {
    code: function() {
      if (this.code.length == 6 && this.code) {
        this.btn1 = false;
      } else {
        this.btn1 = true;
      }
    },
    code1: function() {
      if (this.code1.length == 6 && this.code) {
        this.btn2 = false;
      } else {
        this.btn2 = true;
      }
    }
  },
  computed: {
    getTitle: function() {
      if (this.active == 0) {
        return "请验证当前手机号码";
      } else if (this.active == 1) {
        return "请输入新的手机号码";
      } else {
        return "修改成功";
      }
    }
  },
  deactivated() {
    this.$destroy(true); //销毁组件
  }
};
</script>

<style lang="less">
.user_pwd {
  .bzt {
    display: flex;
    justify-content: center;
    i {
      font-size: 35px;
    }
    .van-steps {
      width: 80%;
      height: 70px;
      .van-steps__items > div:nth-child(2) {
        left: -15px;
      }
    }
  }
  .user_form {
    display: flex;
    justify-content: center;
    margin-top: 10%;
    .van-cell {
      width: 325px;
      border-bottom: solid 1px #006cff;
    }
  }
  .van-field__label {
    width: 40px;
  }
  .sendcode {
    color: #006cff;
  }
  .van-password-input {
    width: 100%;
    margin-left: -10px;
    border: none !important;
    ul {
      border: none;
      width: 100%;
      li {
        border: none;
        margin-left: 11px;
        border-left: none;
        border-right: none;
        border-bottom: 1px #006cff solid;
        text-align: center;
        width: 44px;
        ::after {
          border: 0;
        }
      }
      ::after {
        border: 0;
      }
    }
  }
  .btn_warp {
    margin-top: 10%;
    display: flex;
    justify-content: center;
    .btn {
      width: 325px;
      height: 45px;
      background: #0016ff;
      border-radius: 22.5px;
    }
  }
  .user_pwd {
    display: flex;
    justify-content: center;

    .van-cell {
      width: 325px;
      border-bottom: solid 1px #006cff;
    }
  }
  .icon_warp {
    display: flex;
    justify-content: center;
    .icon-dui {
      font-size: 125px;
      color: #006cff;
      margin-top: 10%;
    }
  }
  .van-hairline--surround::after {
    border: 0;
  }
  .activeI {
    color: blue;
  }
  .daojishi {
    color: #ccc;
  }
}
</style>
